<template>
  <div class="app-container">
    <el-tabs
      v-model="tabNum"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="推送记录"
        name="1"
      >
        <div
          v-if="tabNum=='1'"
          class="chart-container"
        >
          <avue-crud
            v-show="!box"
            :option="optionRecord"
            :data="data"
            :table-loading="loading"
            :page.sync="page"
            @on-load="onLoad"
            @current-change="currentChange"
            @search-change="searchChange"
            @search-reset="resetChange"
          >
          </avue-crud>
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="推送设置"
        name="2"
      >
        <div
          v-if="tabNum=='2'"
          class="chart-container"
        >
          <avue-crud
            v-show="!box"
            :option="optionSet"
            :data="data"
            :table-loading="loading"
            :page.sync="page1"
            @on-load="onLoad1"
            @row-save="rowSave"
            @row-update="rowUpdate"
            @row-del="rowDel"
            @current-change="currentChange1"
            @search-change="searchChange1"
            @search-reset="resetChange1"
          >
          </avue-crud>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  getPushListByPage,
  getPushInstallList,
  createPushInstall,
  updatePushInstall,
  getPushInstallDetail,
  deleteInstallDetail,
  getPushInstallListByPage,
} from '@/api/gradManage.js'
import { getRole, getRoleDown, getOrg, relatTree } from '@/api/user.js'
import LineChart from '@/components/Charts/LineMarker'
import Gauge from '@/components/Charts/Gauge'
import RadarChart from '@/components/Charts/RadarChart'
import PieChart from '@/components/Charts/PieChart.vue'
export default {
  components: {
    LineChart,
    Gauge,
    RadarChart,
    PieChart,
  },
  data() {
    return {
      loading: false,
      /* 分页 */
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false,
      },
      page1: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        background: false,
      },
      searchList: {},
      searchList1: {},
      data: [],
      box: false,
      tabNum: '1',
      optionRecord: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        card: true,
        defaultExpandAll: true,
        dialogDrag: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        menu: false,
        searchLabelWidth: '20%',
        searchSpan: 8,
        searchMenuSpan: 4,
        menuWidth: 100,
        column: [
          {
            label: '企业名称',
            prop: 'QYMC',
            overHidden: true,
          },
          {
            label: '风险大类',
            prop: 'FXDL',
            type: 'select',
            search: true,
            dicData: [],
          },
          {
            label: '风险细类',
            prop: 'YJXL',
            type: 'select',
            dicData: [],
          },
          {
            label: '预警等级',
            prop: 'YJDJ',
            width: 100,
            type: 'select',
            search: true,
            dicData: [],
          },
          {
            label: '预警详情',
            prop: 'YJXQ',
            width: 300,
            overHidden: true,
          },
          /* {
                            label: "推送角色",
                            prop: "roleName",
                        }, */
          {
            label: '接收机构',
            prop: 'orgId',
            type: 'tree',
            search: true,
            defaultExpandAll: true,
            expandOnClickNode: false,
            dicData: [],
            props: {
              label: 'deptValue',
              value: 'id',
            },
          },
          {
            label: '推送日期',
            prop: 'daterange',
            type: 'daterange',
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd',
            startPlaceholder: '日期开始范围自定义',
            endPlaceholder: '日期结束范围自定义',
            display: false,
            search: true,
            searchRange: true,
            hide: true,
          },
          {
            label: '推送日期',
            prop: 'pushTime',
          },
        ],
      },
      fxxlOptions: [],
      optionSet: {
        headerAlign: 'center',
        align: 'center',
        border: true,
        card: true,
        dialogWidth: '30%',
        defaultExpandAll: true,
        dialogDrag: false,
        indexWidth: 100,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        searchLabelWidth: '20%',
        searchSpan: 8,
        searchMenuSpan: 4,
        menuWidth: 280,
        column: [
          {
            label: '接收机构',
            prop: 'orgId',
            type: 'tree',
            search: true,
            span: 24,
            defaultExpandAll: false,
            expandOnClickNode: false,
            dicData: [],
            props: {
              label: 'deptValue',
              value: 'id',
            },
          },
          {
            label: '接收方式',
            prop: 'pushType',
            type: 'select',
            span: 24,
            multiple: true,
            dicData: [],
          },
          {
            label: '风险类别',
            prop: 'yjxl',
            type: 'tree',
            span: 24,
            defaultExpandAll: false,
            expandOnClickNode: true,
            multiple: true,
            dicData: [],
            props: {
              label: 'fieldName',
              value: 'id',
              children: 'children',
              disabled: function (data, node) {
                if (data.children && data.children.length > 0) {
                  return true
                } else {
                  return false
                }
              },
            },
            hide: true,
          },
        ],
      },
    }
  },
  created() {
    var buttonpermsStr = JSON.parse(localStorage.getItem('btnList'))
    this.optionSet.addBtn =
      buttonpermsStr.indexOf('warnPushAdd') > -1 ? true : false
    this.optionSet.editBtn =
      buttonpermsStr.indexOf('warnPushEdit') > -1 ? true : false
    this.optionSet.delBtn =
      buttonpermsStr.indexOf('warnPushDelete') > -1 ? true : false
    this.getDict()
    this.getDict1()
    getOrg({ page: 1, size: 1000000 }).then((res) => {
      this.optionSet.column[0].dicData = res.data.records
      this.optionRecord.column[5].dicData = res.data.records
      //this.pMenu();
    })
    relatTree({ feilds: 'HXFXDL' }).then((response) => {
      this.optionSet.column[2].dicData = response.data
      this.fxxlOptions = []
      response.data.map((item) => {
        item.children.map((ite) => {
          this.fxxlOptions.push(ite)
        })
      })
    })
  },
  methods: {
    pMenu() {
      let i = this.findArray(this.optionSet.column, 'orgId', 'prop')
      if (i > -1) {
        this.optionSet.column[i].dicData[0] = this.officeList
      }
    },
    onLoad(page, params = {}) {
      let searchList = this.searchList
      Object.assign(params, {
        ...searchList,
        pageNum: this.page.currentPage,
        pageSize: this.page.pageSize,
      })
      /* if (page.layout) {
                    Object.assign(params, {
                        pageNum: this.page.currentPage,
                        pageSize: this.page.pageSize,
                    });
                } else {
                    Object.assign(params, page);
                } */
      this.loading = true
      getPushListByPage(params).then((data) => {
        if (data.status) {
          this.loading = false
          this.data = data.data.records
          this.page.total = data.data.total
        }
      })
    },
    onLoad1(page, params = {}) {
      let searchList = this.searchList1
      Object.assign(params, {
        ...searchList,
        pageNum: this.page1.currentPage,
        pageSize: this.page1.pageSize,
      })
      /* if (page.layout) {
                    Object.assign(params, {
                        pageNum: this.page.currentPage,
                        pageSize: this.page.pageSize,
                    });
                } else {
                    Object.assign(params, page);
                } */
      this.loading = true
      console.log(params)
      getPushInstallListByPage(params).then((data) => {
        if (data.status) {
          this.loading = false
          this.data = data.data.records.map((item) => {
            let yjxl = []
            item['yjxl'].split(',').map((ite) => {
              this.fxxlOptions.map((i) => {
                if (i.fieldCode == ite) {
                  yjxl.push(i.id)
                }
              })
            })
            return {
              id: item.id,
              jrfkPrivsRole: item.jrfkPrivsRole,
              orgId: item['orgId'],
              pageNum: item.pageNum,
              pageSize: item.pageSize,
              pushTime: item.pushTime,
              pushType: item['pushType'].split(','),
              roleId: item.roleId,
              yjdl: item['yjdl'],
              yjxl: yjxl,
            }
          })
          console.log(this.data)
          this.page1.total = data.data.total
        }
      })
    },
    async getDict() {
      const dataFXDL = await this.$store.dispatch('asyncApi/getDict', {
        code: 'HXFXDL',
      })
      this.optionRecord.column[1].dicData = dataFXDL
      const dataFXXL = await this.$store.dispatch('asyncApi/getDict', {
        code: 'HXFXXL',
      })
      this.optionRecord.column[2].dicData = dataFXXL
      const dataYJDJ = await this.$store.dispatch('asyncApi/getDict', {
        code: 'YJDJ',
      })
      this.optionRecord.column[3].dicData = dataYJDJ
      const dataTSFS = await this.$store.dispatch('asyncApi/getDict', {
        code: 'TSFS',
      })
      this.optionRecord.column[6].dicData = dataTSFS
    },
    async getDict1() {
      /* getRoleDown().then(data => {
                    this.optionSet.column[0].dicData =[];
                    if (data.status) {
                        for (let i = 0; i < data.data.length; i++){
                            this.optionSet.column[0].dicData.push({value: data.data[i].id,label:data.data[i].roleName});
                        }
                    }
                }); 
                const dataFXDL = await this.$store.dispatch('asyncApi/getDict', {
                    code: 'FXDL'
                });
                this.optionSet.column[1].dicData = dataFXDL;*/
      /* const dataFXXL = await this.$store.dispatch('asyncApi/getDict', {
                    code: 'FXXL'
                });
                this.optionSet.column[2].dicData = dataFXXL; */
      const dataTSFS = await this.$store.dispatch('asyncApi/getDict', {
        code: 'TSFS',
      })
      this.optionSet.column[1].dicData = dataTSFS
    },
    /* 清空 */
    resetChange() {
      this.page.currentPage = 1
      this.page.pageSize = 10
      this.searchList = {}
      this.onLoad()
    },
    /* 搜索筛选 */
    searchChange(params, done) {
      done()
      params.pageNum = 1
      params.pageSize = 10
      if (params.daterange) {
        params.pushTimeStart = params.daterange[0] + ' 00:00:00'
        params.pushTimeEnd = params.daterange[1] + ' 23:59:59'
      }
      params.daterange = []
      params.yjdl = params.FXDL
      params.yjxl = params.YJXL
      params.yjdj = params.YJDJ
      this.searchList = { ...params }
      this.onLoad()
    } /* 清空 */,
    resetChange1() {
      this.page1.currentPage = 1
      this.page1.pageSize = 10
      this.searchList1 = {}
      this.onLoad1()
    },
    /* 搜索筛选 */
    searchChange1(params, done) {
      done()
      this.page1.currentPage = 1
      this.page1.pageSize = 10
      params.roleId = params.roleId
      this.searchList1 = { ...params }
      this.onLoad1()
    },
    /* 新增 */
    rowSave(row, done, loading) {
      row.fxxl = []
      row.yjxl.map((item) => {
        this.fxxlOptions.map((ite) => {
          if (ite.id == item) {
            row.fxxl.push(ite.fieldCode)
          }
        })
      })
      createPushInstall(row).then(
        (data) => {
          done()
          this.onLoad1()
          console.log(data)
          // this.$message({
          //     type: "success",
          //     message: "操作成功!"
          // });
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    /* 修改 */
    rowUpdate(row, index, done, loading) {
      row.fxxl = []
      row.yjxl.map((item) => {
        this.fxxlOptions.map((ite) => {
          if (ite.id == item) {
            row.fxxl.push(ite.fieldCode)
          }
        })
      })
      updatePushInstall(row).then(
        () => {
          done()
          this.onLoad1()
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        },
        (error) => {
          window.console.log(error)
          loading()
        }
      )
    },
    /* 删除 */
    rowDel(row) {
      this.$confirm('确定将选择数据删除?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteInstallDetail({
          id: row.id + '',
        }).then(() => {
          this.onLoad1()
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
        })
      })
    },
    /* 改变页码 */
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    /* 改变页码 */
    currentChange1(currentPage) {
      this.page.currentPage = currentPage
    },
    /* 查看 */
    viewPage() {
      this.box = true
    },
    toBack() {
      this.box = false
    },
    handleClick(e) {
      if (e.name == '1') {
        this.searchList = {}
      } else {
        this.searchList1 = {}
      }
    },
    handelAdd() {
      this.showDialog = true
      this.title = '新增'
      this.dialogData = {
        fxlb: [],
      }
    },
    handelEdit(row) {
      this.showDialog = true
      this.title = '编辑'
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
$bb: 1px solid #eaeaea;
/deep/ .avue-crud__pagination {
  text-align: center;
}
/deep/ .el-tree {
  // 不可全选样式
  .el-tree-node {
    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
    .el-tree-node__content > label.el-checkbox.is-disabled {
      display: none;
    }
  }
}
.avue_detail {
  position: relative;

  /deep/ .el-tabs__item {
    font-size: 20px;
    font-weight: 600;
  }

  // 按钮
  .fr {
    position: absolute;
    right: 0;
    top: 5px;
    z-index: 99;
  }

  .h_label {
    color: #3a3f63;
    font-weight: 600;
    padding: 10px 0;
  }

  .bb {
    border-bottom: $bb;
  }

  .lh {
    line-height: 35px;
    margin-top: 15px;
    text-align: center;

    .el-col-14 {
      font-size: 0.8rem;
    }

    .lab {
      font-size: 0.88rem;
      color: #767676;
    }

    .val {
      color: #1e1e1e;
      font-size: 0.75rem;

      b {
        font-size: 1.25rem;
      }
    }
  }

  .c {
    color: #409eff;
  }

  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
}
</style>
